<?php
$cdnUrl='./';
//$cdnUrl2='http://tu-10030004.file.myqcloud.com/bairen/';
 
$appId='wxe214ac48790c622f';
$secret='6b7153fc9c94ee2008e71ecbb2313bec';
include 'jssdk.php';
$jssdk = new JSSDK($appId, $secret);
$signPackage = @$jssdk->GetSignPackage();
 
?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>海渔文化节</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
html,body{width:100%;font-size:12px;font-family:Helvetica,Tahoma, Arial, STXihei,Microsoft YaHei, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
body{-webkit-overflow-scrolling: touch;overflow-scrolling: touch;overflow-y: scroll;max-width:750px;}
body, div{padding:0px;margin:0px auto;}
.weui-dialog{position:fixed;z-index:5000;width:80%;max-width:300px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#FFF;text-align:center;border-radius:3px;overflow:hidden}.weui-dialog__hd{padding:1.3em 1.6em .5em}.weui-dialog__title{font-weight:400;font-size:18px}.weui-dialog__bd{padding:0 1.6em .8em;min-height:40px;font-size:15px;line-height:1.3;word-wrap:break-word;word-break:break-all;color:#999}.weui-dialog__bd:first-child{padding:1.2em 20px .1em;color:#353535}.weui-dialog__ft{position:relative;line-height:48px;font-size:18px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-dialog__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #D5D5D6;color:#D5D5D6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-dialog__btn{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3CC51F;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative}.weui-dialog__btn:active{background-color:#EEE}.weui-dialog__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #D5D5D6;color:#D5D5D6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(.5);transform:scaleX(.5)}.weui-dialog__btn:first-child:after{display:none}.weui-dialog__btn_default{color:#353535}.weui-dialog__btn_primary{color:#0BB20C}@media screen and (min-width:1024px){.weui-dialog{width:35%}}.weui-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.6)}
.weui-mask_transparent{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0}
.js_dialog{display:none;}
-webkit-touch-callout:none;
-webkit-user-select:none;
html{-ms-touch-action:none;}
div,img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
*{-webkit-text-size-adjust: none;}
.simg{position:absolute;display:block;}
a{text-decoration:none;}
.container{position:relative;width:100%;transform:translate3d(0,0,0);width:100%;height:auto;}
.p-b, .thebg{position:absolute;width:100%;top:0;left:0;}
.page, .p3{position:absolute;width:100%;height:100%;top:0;left:0;overflow-x:hidden;}
.page{display:none;}
.ltop{top:0;}
.p3{opacity: 0;}
.w100, .ltop, .l-bg, .l-bottom{position:absolute;width:100%;left:0;display:block;}
.l-bottom{bottom: 0;}
.l-bg{top:0;height:100%;}
.animated{
  -webkit-animation-duration: 1s;animation-duration: 1s;
  -webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.ani2{
  -webkit-animation-duration: 2s;animation-duration: 2s;
  -webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.ani25{
  -webkit-animation-duration: 2.5s;animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.ani3{
  -webkit-animation-duration: 3s;animation-duration: 3s;
  -webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.animated.infinite, .ani25.infinite{-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
@keyframes fadeInLeft{from {opacity: 0;transform: translate3d(-20%, 0, 0);}to {opacity: 1;transform: translate3d(0, 0, 0);}}
.fadeInLeft{animation-name: fadeInLeft;}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(40%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}
@keyframes fadeInUp {
  from {opacity: 0;transform: translate3d(0, 30%, 0);}
  to {opacity: 1;transform: translate3d(0, 0, 0);}
}
.fadeInUp {animation-name: fadeInUp;}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -60%, 0);
  }
  80% {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}
@keyframes theyu {
  from {
    opacity: 0;
    transform: scale3d(0.6, 0.6, 0.6) translate3d(-36%, -10%, 0);
  }
  100% {
    opacity: 1;
  }
}
.theyu {
  animation-name: theyu;
}
@keyframes theyu2 {
  from {
    opacity: 0;
    transform: scale3d(0.6, 0.6, 0.6) translate3d(-36%, -10%, 0);
  }
  50% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
.theyu2 {
  animation-name: theyu2;
}
@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}
.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
}
@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }

  25% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  50% {
    transform: scale3d(1, 1, 1);
  }
  
  75% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  } 
}
.pulse {
  animation-name: pulse;
  animation-timing-function: ease-in-out;
}
.hide{display:none;}
.animated.d1s{animation-delay: .1s;}
.animated.d2s{animation-delay: .2s;}
.animated.d3s{animation-delay: .3s;}
.animated.d4s{animation-delay: .4s;}
.animated.d5s{animation-delay: .5s;}
.animated.d6s{animation-delay: .6s;}
.animated.d7s, .ani25.d7s{animation-delay: .7s;}
.animated.d8s{animation-delay: .8s;}
.animated.d9s{animation-delay: .9s;} 
.ani25.d15s{animation-delay: 1.5s;} 
.yin{position:absolute;right:0;top:0;}
.p1-btn{z-index: 2;}
.p3-map{position:absolute;}
.logo-text{display:none;}
.p3-map img{display: none;}
.p3-btn{z-index: 1000;}
</style>
<script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=ZIHBZ-P5ICQ-OA55T-GVXOP-BPX4O-QUBHE"></script>
<script>var _hmt = _hmt || [];(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?48182351da245536689ac9aa807e879d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script></head>
<body>
<div class="container">
<div class="p1 page">
  
   <img class="l-bg" src="<?php echo $cdnUrl ?>img/bg.jpg">
    
   <img class="ltop" src="<?php echo $cdnUrl ?>img/p1-i1.png">
   <img class="ltop" src="<?php echo $cdnUrl ?>img/p1-t1.png">
   <img class="yin" src="<?php echo $cdnUrl ?>img/yin.png">
   
   <div class="thebg">
     <img class="p1-t2 w100 ani25 fadeInDown" src="<?php echo $cdnUrl ?>img/p1-t2.png">
     <img class="p1-t3 simg animated flipInY d2s" src="<?php echo $cdnUrl ?>img/p1-t3.png">

     <img class="p1-n1 simg animated zoomIn" src="<?php echo $cdnUrl ?>img/p1-n1.png">
     <img class="p1-n2 w100 animated zoomIn d9s" src="<?php echo $cdnUrl ?>img/p1-n2.png">

     <img class="p1-yu simg ani3 theyu2 d3s" src="<?php echo $cdnUrl ?>img/p1-yu2.png">
     <img class="p1-yu simg ani3 theyu2 d3s" src="<?php echo $cdnUrl ?>img/p1-yu.png">
     <img class="p1-t4 w100" src="<?php echo $cdnUrl ?>img/p1-i2.png">
     <img class="p1-btn simg ani25 pulse infinite d15s" src="<?php echo $cdnUrl ?>img/p1-btn.png">

   </div>
   
   <img class="l-bottom ani25 fadeIn d7s" src="<?php echo $cdnUrl ?>img/p1-i3.png">


   
   
 
</div>
 
 
<div class="p2 page">
   <img class="l-bg" src="<?php echo $cdnUrl ?>img/p2.jpg">
   <img class="ltop" src="<?php echo $cdnUrl ?>img/p2-l1.png">
   <img class="ltop animated fadeInDown" src="<?php echo $cdnUrl ?>img/p2-t1.png">
   <img class="yin" src="<?php echo $cdnUrl ?>img/yin.png">

   <div class="thebg">
     <img class="p2-t2 w100 animated fadeInUp" src="<?php echo $cdnUrl ?>img/p2-t2.png">
     <img class="p2-t3 simg animated fadeInLeft" src="<?php echo $cdnUrl ?>img/p2-t3-2.png">

     <img class="p2-t4 w100" src="<?php echo $cdnUrl ?>img/p2-l3.png">

     <img class="p2-btn simg animated fadeInDown d6s" src="<?php echo $cdnUrl ?>img/p2-btn.png">

   </div>
  

   <img class="l-bottom ani25 fadeIn d7s" src="<?php echo $cdnUrl ?>img/p2-l2.png">
</div>

<div class="p3">
   <img class="l-bg" src="<?php echo $cdnUrl ?>img/p2.jpg">
   <img class="ltop" src="<?php echo $cdnUrl ?>img/p3-l1.png">
   <img class="l-bottom ani25 fadeIn d7s" src="<?php echo $cdnUrl ?>img/p3-l2.png">
   <img class="ltop animated fadeInDown" src="<?php echo $cdnUrl ?>img/p2-t1.png">
   <img class="yin" src="<?php echo $cdnUrl ?>img/yin.png">
   <div class="thebg">
     <img class="p3-t1 w100 animated fadeInLeft" src="<?php echo $cdnUrl ?>img/p3-t1.png">
     <img class="p3-t2 w100" src="<?php echo $cdnUrl ?>img/p3-t2.png">
     <img class="p3-t3 w100 animated fadeInUp" src="<?php echo $cdnUrl ?>img/p3-t3.png">
     <div class="p3-map" id="p3-map"></div>
     <img class="p3-btn simg ani25 pulse infinite d3s" src="<?php echo $cdnUrl ?>img/p3-btn.png">
  </div>

</div>

<div style="display:none;">
    <audio id="mbg" preload="auto" volume="0.2" loop="loop"><source src="http://tu-10030004.file.myqcloud.com/hywhj/m.mp3"  type="audio/mpeg"></audio>
    
</div>

 
</div>
<script src="https://mat1.gtimg.com/libs/jquery2/2.1.4/jquery2.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<?php include 'js.php'; ?>
</body></html>